﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
	"http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
    <meta http-equiv="Cache-Control" content="max-age=200" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <link rel="author" href="http://design.leerjohnson.com" />
    <title>YUI 2.7 Document Template</title>
    <!-- CSS and Script Tags Configured at:
        http://developer.yahoo.com/yui/articles/hosting/?autocomplete#configure -->
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/yui/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css" />
    <link rel="stylesheet" type="text/css" href="Xhttp://ajax.googleapis.com/ajax/libs/yui/2.7.0/build/base/base-min.css" />
 
    <link rel="stylesheet" type="text/css" href="/online/css/screen.css" />
    
    
</head>
<body>
    <!--    #doc = 750px width, centered
            #doc2 = 950px width, centered
            #doc3 = 100% width 
            #doc4 = 974px width, centered 
        Grids: Templates (yui-t’s)
            .yui-t1 160 on left
            .yui-t2 180 on left
            .yui-t3 300 on left
            .yui-t4 180 on right
            .yui-t5 240 on right
            .yui-t6 300 on right
    -->
    <div id="doc3" class="yui-t4">
        <!-- overall document wrapper -->
        <div id="hd">
            <!--header / masthead-->
            <h1>
                <span class="ico beer">FlavIconCSS</span> <span class="ico color_wheel right">Style
                    Guide</span></h1>
        </div>
        <div id="”bd”">
            <!--body-->
            <div id="yui-main">
                <div class="yui-b">
                    <!--primary-->
                    <!--
                    Grids: Nesting Grids (yui-g’s)
                    .yui-g 1/2, 1/2
                    .yui-gb 1/3, 1/3, 1/3
                    .yui-gc 2/3, 1/3
                    .yui-gd 1/3, 2/3
                    .yui-ge 3/4, 1/4
                    .yui-gf 1/4, 3/4                
                !-->
                    <div class="yui-g">
                        <h2>Headings</h2>
                        <div class="yui-u first">
                            <h1 class="ico about">
                                This is 1rd level heading</h1>
                            <p class="ico contact-dir">
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                                euismod tincidunt ut et accumsan et iusto odio dignissim qui blandit praesent luptatum
                                zzril delenit Lorem ipsum dolor sit amet, volutpat.
                            </p>
                            <h2 class="ico bomb">
                                This is 2rd level heading</h2>
                            <p class="ico contact-dir">
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                                euismod tincidunt ut consectetuer adipiscing elit.
                            </p>
                            <h3 class="ico about">
                                This is 3rd level heading</h3>
                            <p class="ico system">
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                            </p>
                        </div>
                        <div class="yui-u">
                            <h4 class="ico about">
                                This is 4th level heading</h4>
                            <p class="ico 64bit right">
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                                euismod tincidunt ut consectetuer adipiscing elit, sed diam nonummy nibh euismod
                                tincidunt ut laoreet dolore magna aliquam erat volutpat.
                            </p>
                            <h5><a class="ico about">
                                This is 5th level heading</a></h5>
                            <p>
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                                euismod tincidunt ut consectetuer adipiscing elit.
                            </p>
                            <h6>
                                This is 6th level heading</h6>
                            <p>
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                            </p>
                        </div>
                    </div>
                
                <div class="yui-g">
                    <div class="yui-u first">
                        <h2>
                            Headings</h2>
                        <div id="headings">
                            <h1 class="ico about">
                                This is 1rd level heading</h1>
                            <p class="ico contact-dir">
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                                euismod tincidunt ut et accumsan et iusto odio dignissim qui blandit praesent luptatum
                                zzril delenit Lorem ipsum dolor sit amet, volutpat.
                            </p>
                            <h2 class="ico 32bit">
                                This is 2rd level heading</h2>
                            <p class="ico contact-dir">
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                                euismod tincidunt ut consectetuer adipiscing elit.
                            </p>
                            <h3 class="ico about">
                                This is 3rd level heading</h3>
                            <p>
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                            </p>
                            <h4 class="ico about">
                                This is 4th level heading</h4>
                            <p>
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                                euismod tincidunt ut consectetuer adipiscing elit, sed diam nonummy nibh euismod
                                tincidunt ut laoreet dolore magna aliquam erat volutpat.
                            </p>
                            <h5 class="ico about">
                                This is 5th level heading</h5>
                            <p>
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                                euismod tincidunt ut consectetuer adipiscing elit.
                            </p>
                            <h6>
                                This is 6th level heading</h6>
                            <p>
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                            </p>
                        </div>
                        <h3>
                            Subheadings</h3>
                        <div id="subheadings">
                            <h1>
                                This is 1rd level heading</h1>
                            <h1 class="sub">
                                This is 1rd level subheading</h1>
                            <p>
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                                euismod tincidunt ut et accumsan et iusto odio dignissim qui blandit praesent luptatum
                                zzril delenit Lorem ipsum dolor sit amet, volutpat.
                            </p>
                            <h2>
                                This is 2rd level heading</h2>
                            <h2 class="sub">
                                This is 2rd level subheading</h2>
                            <p>
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                                euismod tincidunt ut consectetuer adipiscing elit, sed diam nonummy nibh euismod
                                tincidunt ut laoreet dolore magna aliquam erat volutpat.
                            </p>
                            <h3>
                                This is 3rd level heading</h3>
                            <h3 class="sub">
                                This is 3rd level subheading</h3>
                            <p>
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                                euismod tincidunt ut consectetuer adipiscing elit, sed diam nonummy nibh euismod
                                tincidunt ut laoreet dolore magna aliquam erat volutpat.
                            </p>
                            <h4>
                                This is 4th level heading</h4>
                            <h4 class="sub">
                                This is 4th level subheading</h4>
                            <p>
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                                euismod tincidunt ut consectetuer adipiscing elit, sed diam nonummy nibh euismod
                                tincidunt ut laoreet dolore magna aliquam erat volutpat.
                            </p>
                            <h5>
                                This is 5th level heading</h5>
                            <h5 class="sub">
                                This is 5th level subheading</h5>
                            <p>
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                                euismod tincidunt ut consectetuer adipiscing elit, sed diam nonummy nibh euismod
                                tincidunt ut laoreet dolore magna aliquam erat volutpat.
                            </p>
                            <h6>
                                This is 6th level heading</h6>
                            <h6 class="sub">
                                This is 6th level subheading</h6>
                            <p>
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                                euismod tincidunt ut consectetuer adipiscing elit, sed diam nonummy nibh euismod
                                tincidunt ut laoreet dolore magna aliquam erat volutpat.
                            </p>
                        </div>
                        <h2>
                            Basic block level elements</h2>
                        <div id="block-elements">
                            <p>
                                Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
                                egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet,
                                ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
                                Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.
                                Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean
                                fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
                                lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent
                                dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
                                eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
                                facilisis luctus, metus</p>
                            <p>
                                Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
                                egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet,
                                ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
                                Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.
                                Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean
                                fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
                                lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent
                                dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
                                eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
                                facilisis luctus, metus</p>
                            <p>
                                Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
                                egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet,
                                ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
                                Mauris placerat eleifend leo.</p>
                            <p>
                                Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
                                egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet,
                                ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
                                Mauris placerat eleifend leo.</p>
                            <p>
                                Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
                                egestas.</p>
                            <div>
                                This is a <code>div</code> element. Lorem ipsum dolor sit amet, elit, sed diam nonummy
                                nibh euismod tincidunt ut consectetuer adipiscing elit, sed diam nonummy nibh euismod
                                tincidunt ut laoreet dolore magna aliquam erat volutpat. (End of <code>div</code>.)
                            </div>
                            <blockquote>
                                <p>
                                    This is a block quotation containing a <em>single</em> paragraph. Lorem ipsum dolor
                                    sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
                                    ut laoreet dolore magna aliquam erat volutpat.</p>
                            </blockquote>
                            <p>
                                The following contains address information about the author, in an <code>address</code>
                                element and may be used by authors to supply contact information for a document
                                or a major part of a document such as a form. This element often appears at the
                                beginning or end of a document.</p>
                            <address class="vcard">
                                <a href="http://leerjohnson.com">Lee R. Johnson</a>
                                <br />
                                <a class="tel" href="voice:+15038516041">+1 503 851 6041</a> | <a class="email" href="mailto:design@leerjohnson.com">
                                    design@leerjohnson.com</a><br />
                                <span class="adr"><span class="street-address">3454 Ipsum Lane N.E.</span> | <span
                                    class="locality">Kiezer</span>, <span class="region">Oregon</span> <span class="postal-code">
                                        97303</span> | <span class="country-name">United States</span> </span>
                            </address>
                            <p>
                                This next bit shows that PREformatted text is working.</p>
                            <pre>1
 2
  3
   4
    5
</pre>
                        </div>
                        <h2>
                            Tables</h2>
                        <div id="tables">
                            <p>
                                The following table has a caption. The first row and the first column contain table
                                header cells only; other cells are data cells.</p>
                            <table summary="each row names a nordic country and specifies its total area and land area, in square kilometers">
                                <caption>
                                    Caption: Sample table: Areas of the Nordic countries, in sq km</caption>
                                <tbody>
                                    <tr>
                                        <th>
                                            Country
                                        </th>
                                        <th>
                                            Total area
                                        </th>
                                        <th>
                                            Land area
                                        </th>
                                    </tr>
                                    <tr>
                                        <th>
                                            Denmark
                                        </th>
                                        <td>
                                            43,070
                                        </td>
                                        <td>
                                            42,370
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>
                                            Finland
                                        </th>
                                        <td>
                                            337,030
                                        </td>
                                        <td>
                                            305,470
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>
                                            Iceland
                                        </th>
                                        <td>
                                            103,000
                                        </td>
                                        <td>
                                            100,250
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>
                                            Norway
                                        </th>
                                        <td>
                                            324,220
                                        </td>
                                        <td>
                                            307,860
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>
                                            Sweden
                                        </th>
                                        <td>
                                            449,964
                                        </td>
                                        <td>
                                            410,928
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <h2>
                            Forms</h2>
                        <form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi">
                        <div>
                            <input type="hidden" name="hidden field" value="42"></div>
                        <div>
                            <label for="f1">
                                Single-line text input field:
                                <input id="f1" name="text" size="20" value="Default text."></label></div>
                        <div>
                            <label for="f2">
                                Multi-line text input field (textarea):</label></div>
                        <div>
                            <textarea id="f2" name="textarea" rows="16" cols="20">Default text.</textarea></div>
                        <p>
                            The following two radio buttons are inside <code>fieldset</code> element with a
                            <code>legend</code>:</p>
                        <fieldset>
                            <legend>Legend</legend>
                            <div>
                                <label for="f3">
                                    Radio button 1</label>
                                <input id="f3" type="radio" name="radio" value="1">
                            </div>
                            <div>
                                <label for="f4">
                                    Radio button 2 (initially checked)</label>
                                <input id="f4" type="radio" name="radio" value="2" checked="">
                            </div>
                        </fieldset>
                        <fieldset>
                            <legend>Check those that apply</legend>
                            <div>
                                <label for="f5">
                                    Checkbox 1</label>
                                <input id="f5" type="checkbox" name="checkbox">
                            </div>
                            <div>
                                <label for="f6">
                                    Checkbox 2 (initially checked)</label>
                                <input id="f6" type="checkbox" name="checkbox2" checked="">
                            </div>
                        </fieldset>
                        <p>
                            <label for="f10">
                                A <code>select</code> element with <code>size="1"</code> (dropdown box):</label>
                        </p>
                        <select id="f10" name="select1" size="1">
                            <option>one</option>
                            <option selected="">two (default)</option>
                            <option>three</option>
                        </select>
                        <p>
                            <label for="f11">
                                A <code>select</code> element with <code>size="3"</code> (listbox):</label>
                        </p>
                        <select id="f11" name="select2" size="3">
                            <option>one</option>
                            <option selected="">two (default)</option>
                            <option>three</option>
                        </select>
                        <div>
                            <label for="f99">
                                Submit button:</label>
                            <input id="f99" type="submit" name="submit" value="Just a test" />
                        </div>
                        <div>
                            <label for="f0">
                                Reset button:</label>
                            <input id="f0" type="reset" name="reset" value="Reset" />
                        </div>
                        </form>
                    </div>
                    <div class="yui-u">
                        <h2>
                            Lists</h2>
                        <div id="lists">
                            <p>
                                This is a paragraph before <strong>unnumbered</strong> lists (<code>ul</code>).
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                                euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                            <ul>
                                <li>
                                    <p>
                                        List item content wrapped in a <code>p</code>. Morbi in sem quis dui placerat ornare.
                                        Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras
                                        consequat.</p>
                                </li>
                                <li>
                                    <p>
                                        List item content wrapped in a <code>p</code>. Praesent dapibus, neque id cursus
                                        faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat
                                        volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>
                                </li>
                                <li>
                                    <p>
                                        Multiple <code>p</code> elements in a list item. Phasellus ultrices nulla quis nibh.
                                        Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam
                                        nulla quam, gravida non, commodo a, sodales sit amet, nisi.</p>
                                    <p>
                                        Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut,
                                        elementum vulputate, nunc.</p>
                                </li>
                            </ul>
                            <ul>
                                <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                                <li>Aliquam tincidunt mauris eu risus.</li>
                                <li>Vestibulum auctor dapibus neque.</li>
                            </ul>
                            <p>
                                This is a paragraph before a <strong>numbered</strong> list (<code>ol</code>). Note
                                that the spacing between a paragraph and a list before or after that is hard to
                                tune in a user style sheet. You can't guess which paragraphs are logically related
                                to a list, e.g. as a "list header".</p>
                            <ol>
                                <li>One.</li>
                                <li>Two.</li>
                                <li>Three. </li>
                                <li>Four. </li>
                                <li>Five</li>
                                <li>Six</li>
                                <li>Seven</li>
                                <li>Eight</li>
                                <li>Nine</li>
                                <li>Ten</li>
                            </ol>
                            <p>
                                This is a paragraph before a <strong>definition</strong> list (<code>dl</code>).
                                In principle, such a list should consist of <em>terms</em> and associated definitions.
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                                euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                            </p>
                            <dl>
                                <dt>Apple</dt>
                                <dd>
                                    is a fruit.</dd>
                                <dt>Banana</dt>
                                <dd>
                                    Is also a fruit.</dd>
                                <dt>Tomato</dt>
                                <dd>
                                    Is debatable. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
                                    nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</dd>
                            </dl>
                        </div>
                        <h2>
                            Text-level markup</h2>
                        <div id="text-markup">
                            <ul>
                                <li>
                                    <abbr title="Cascading Style Sheets">
                                        CSS</abbr>
                                    (an abbreviation; <code>abbr</code> markup used)</li>
                                <li><acronym title="radio detecting and ranging">radar</acronym> (an acronym; <code>
                                    acronym</code> markup used)</li>
                                <li><cite>Origin of Species</cite> (a book title; <code>cite</code> markup used)</li>
                                <li><code>a[i] = b[i] + c[i);</code> (computer code; <code>code</code> markup used)</li>
                                <li>an <dfn>octet</dfn> is an entity consisting of eight bits (<code>dfn</code> markup
                                    used for the term being defined)</li>
                                <li>this is <em>very</em> simple (<code>em</code> markup used for emphasizing a word)</li>
                                <li>type <kbd>yes</kbd> when prompted for an answer (<code>kbd</code> markup used for
                                    text indicating keyboard input)</li>
                                <li><q>Hello!</q> (<code>q</code> markup used for quotation)</li>
                                <li>He said: <q>She said <q>Hello!</q></q> (a quotation inside a quotation)</li>
                                <li>you may get the message
                                    <samp>
                                        Core dumped</samp>
                                    at times (<code>samp</code> markup used for sample output)</li>
                                <li><strong>this is highlighted text</strong> (<code>strong</code> markup used)</li>
                                <li><tt>text in monospace font</tt> (<code>tt</code> markup used)</li>
                                <li>the command <code>cat</code>
                                    <var>
                                        filename</var>
                                    displays the file specified by the
                                    <var>
                                        filename</var>
                                    (<code>var</code> markup used to indicate a word as a variable).</li>
                                <li>In order to test how subscripts and superscripts (<code>sub</code> and <code>sup</code>
                                    markup) work inside running text, we need some dummy text around constructs like
                                    x<sub>1</sub> and H<sub>2</sub>O (where subscripts occur). So here is some fill
                                    so that you will (hopefully) see whether and how badly the subscripts and superscripts
                                    mess up vertical spacing between lines. Now superscripts: M<sup>lle</sup>, 1<sup>st</sup>,
                                    and then some mathematical notations: e<sup>x</sup>, sin<sup>2</sup> <i>x</i>, and
                                    some nested superscripts (exponents) too: Lorem ipsum dolor sit amet, consectetuer
                                    adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
                                    aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                                    ullamcorper suscipit lobortis nisl ut aliquip ex ea euismod tincidunt ut laoreet
                                    dolore magna aliquam erat volutpat. </li>
                            </ul>
                            <p>
                                Some of the elements tested above are typically displayed in a monospace font, often
                                using the <em>same</em> presentation for all of them. This tests whether that is
                                the case on your browser:</p>
                            <ul>
                                <li><code>This is sample text inside code markup</code></li>
                                <li><kbd>This is sample text inside kbd markup</kbd></li>
                                <li>
                                    <samp>
                                        This is sample text inside samp markup</samp></li>
                                <li><tt>This is sample text inside tt markup</tt></li>
                            </ul>
                        </div>
                        <h2>
                            Links</h2>
                        <div id="nav-links">
                            <ul>
                                <li><a href="http://developer.yahoo.com/yui">developer.yahoo.com/yui</a></li>
                                <li><a href="http://yuiblog.com/">the YUI Blog</a></li>
                            </ul>
                            <ul id="nav">
                                <li><a href="#nowhere" title="Lorum ipsum dolor sit amet">Lorem</a></li>
                                <li><a href="#nowhere" title="Aliquam tincidunt mauris eu risus">Aliquam</a></li>
                                <li><a href="#nowhere" title="Morbi in sem quis dui placerat ornare">Morbi</a></li>
                                <li><a href="#nowhere" title="Praesent dapibus, neque id cursus faucibus">Praesent</a></li>
                                <li><a href="#nowhere" title="Pellentesque fermentum dolor">Pellentesque</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="yui-b">
            <!--secondary-->
            <h3>
                Helpful links and tools</h3>
            <ul id="Ul1">
                <li><a href="http://developer.yahoo.com/yui/grids/builder/">The YUI Grids Builde</a></li>
                <li><a href="http://developer.yahoo.com/yui/articles/hosting/?autocomplete#configure">
                    YUI Dependency Configurator:</a></li>
                <li><a href="http://html-ipsum.com/">HTML Ipsum</a></li>
                <li><a href="http://snipplr.com/users/LeeRJohnson/">Snipplr</a></li>
                <li><a href="http://www.typetester.org/">Typetester</a></li>
            </ul>
        </div>
    </div>
    <div id="ft">
        <!--footer-->
    </div>
    </div>
</body>
</html>
